<template>
    <!-- 短信验证码登入 -->
    <div class="smsContainer">
        <el-form-item label="手机号">
            <el-input maxlength="11" class="captcha phone" v-model="phoneNumber"></el-input>
            <span @click="sendSms" class="captcha-svg"
                style="color: #888; font-weight:bolder; 45px; text-decoration: underline; user-select: none;"
                v-text="msg">

            </span>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input v-model="code"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </div>
</template>
<script>
import * as api from "@/api/users"
export default {
    props: {
        storageUserInfo: {
            type: Function,
            require: true
        }
    },
    data() {
        return {
            msg: '点击发送验证码',
            flag: true,//一个开关
            phoneNumber: "",
            code: "",//短信验证码
        }
    },
    methods: {
        async sendSms() {
            if (this.flag) {
                this.flag = false;//关掉
                //调用接口,获取手机验证码
                let res = await api.getSmsCode(this.phoneNumber)
                // console.log(res)
                if(res.data.state){
                    //短信发送成功
                    this.$message({
                        type:"success",
                        message:'短信发送成功'
                    })
                }else{
                    this.$message.error(res.data.msg)
                }
                let delay = 5
                this.msg = `${delay}秒后重新发送`
                this.interval = setInterval(() => {
                    delay--
                    if (delay < 1) {
                        this.msg = '点击发送验证码'
                        clearInterval(this.interval)
                        //将开关重新打开
                        this.flag = true;
                    } else {
                        this.msg = `${delay}秒后重新发送`
                    }

                }, 1000)
            }
        },
        async submit() {
            let res = await api.smsLogin(this.code);
            // console.log(res)
            //调用父组件的方法,储存用户信息
            this.storageUserInfo(res.data)
            //跳转页面
            this.$router.push('/')
        },
    }
}
</script>
<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
    width: 25px !important;
    height: 25px !important;
    vertical-align: -7px;
    margin-right: 3px;

}

.login-container {
    text-align: center;
    color: #fff;

    .common-login {
        padding-right: 50px;
    }

    //二维码样式
    .erwei .img {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;

        img {
            position: absolute;
            left: 0;
        }

        .mask {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 0;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
    }

    .jiaobiao {
        font-size: 60px;
        color: #fff;
        position: absolute;
        right: -1px;
        top: -1px;
        cursor: pointer;
        opacity: 0.7;
    }

    .video {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .bg2 {
        background-image: url("../../assets/img/bg2.png");
        background-repeat: no-repeat;
        position: fixed;
        width: 20%;
        height: 40%;
        background-size: 100% 100%;
        left: 20%;
        top: 40%;
        opacity: 0.5;
    }

    .el-form {
        position: fixed;
        right: 10%;
        top: 25%;
        border-radius: 5px;
        width: 400px;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 100px 0 50px 0;

        /deep/ .el-input__inner {
            width: 250px;
        }

        /deep/ .el-button--primary {
            background: linear-gradient(90deg, #1596fb, #002dff);
            width: 250px;
        }

        /deep/ .el-form-item__label {
            color: #fff;
        }

        .title {
            margin: 0 0 60px 0;
            text-align: center;
            color: #fff;
        }

        /deep/ .captcha {
            width: 100px;
            vertical-align: top;

            .el-input__inner {
                width: 100%;
                height: 45px;
                border-radius: 5px 0 0 5px;
                border: 0;
                font-size: 18px;
            }
        }

        svg path {
            stroke: red;
        }

        .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 45px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0px 5px 5px 0;
        }

        .el-form-item__content {
            margin-left: 30px !important;
            width: 250px !important;
        }
    }
}

.sms {
    margin-left: -15px !important;
    width: 250px !important;
}

.smsContainer {
    padding-right: 20px !important;
    width: 89%;

    /deep/ .el-form-item__label {
        // margin-left: 80px !important
        padding: 0 !important;
        padding-right: 10px !important;
    }

    /deep/ .phone {
        width: 140px !important;
    }

    /deep/ .captcha-svg {
        width: 115px !important;
    }

    /deep/ .el-form-item__content {
        margin: 0;
    }
}

// .smsContainer{
// 	width:300px;
// }
</style>